<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    #app {
      width: 980px;
      height: 1200px;
      background-color: white;
      margin: 0 auto;
    }
    #a {
      background-color: white;
      width: 980px;
      height: 300px;
      margin: 0 auto;
    }

    .c {
      float: left;
      margin-left: 125px;
      margin-top: 50px;
    }

    p {
      font-size: 32px;
      text-align: center;
      color: #333333;
      font-weight: bold;
    }

    .inner {
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      height: calc(180px + 17px);
    }

    .container {
      width: 980px;
      height: 200px;
      border: 1px solid blue;
      overflow: hidden;
    }
    .x {
      width: 450px;
      height: 570px;
      float: left;
      margin-left: 10px;
      padding: 0 10px;
    }
    #s {
      text-decoration: underline;
      text-decoration: none;
      font-size: 50px;
      width: 1000px;
      height: 50px;
      margin:20px 40px;
    }
    #q {
      margin-top: 30px;
      width: 960px;
      height: 230px;
      background-color:whitesmoke;
      border-radius:30px;
      margin-left: 15px;
    }
    .v {
      padding-top: 25px;
      width: 300px;
      height: 150px;
      float: left;

      text-align:center;}

  </style>
</head>
<body>
<div id="app">
  <div style="width: 980px; height: 500px; margin: 0 auto">
    <el-carousel height="500px">
      <el-carousel-item v-for="item in arr">
        <img :src="item" width="100%" height="100%" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
  <div id="a">
    <div class="c">
      <a href="" style="text-decoration: none">
        <img src="imgs/tang.png" alt="">
        <p>门店堂食</p>
      </a>
    </div>
    <div class="c">
      <a href="" style="text-decoration: none">
        <img src="imgs/wai.png" alt="">
        <p>外卖配送</p>
      </a>
    </div>
    <div class="c">
      <a href="" style="text-decoration: none">
        <img src="imgs/dai.png" alt="">
        <p>打包外带</p>
      </a>
    </div>
  </div>
  <div style="float: left">
    <p style="width: 460px;height: 30px;float: left;text-align: left">新品推荐</p>
    <p style="width: 460px;height: 30px;float: left;text-align: right">更多</p>
  </div>
  <div class="container">
    <div class="inner">
      <img src="imgs/dcfl01.png" style="height: 200px">
      <img src="imgs/dcfl02.png" style="height: 200px">
      <img src="imgs/dcfl04.png" style="height: 200px">
      <img src="imgs/dcfl08.png" style="height: 200px">
      <img src="imgs/dcfl03.png" style="height: 200px">
      <img src="imgs/dcfl05.png" style="height: 200px">
      <img src="imgs/dcfl06.png" style="height: 200px">
      <img src="imgs/dcfl07.png" style="height: 200px">
      <img src="imgs/dcfl09.png" style="height: 200px">
    </div>
  </div>
  <div>
    <div class="x">
      <img style="width: 460px;height: 550px" src="imgs/sh.jpg" alt="">
    </div>
    <div class="x">
      <img style="width: 460px;height:550px" src="imgs/mwx.jpg" alt="">
    </div>
  </div>
  <div id="s">
    <p style="width: 1200px;height: 30px;float: left;text-align: left">其他服务</p>
  </div>
  <div id="q">
    <div class="v">
      <a href="" style="text-decoration: none;">
        <img src="imgs/yhhd.png" alt="">
        <p style="font-size: 28px">优惠活动</p>
      </a>
    </div>
    <div class="v">
      <a href="" style="text-decoration: none;">
        <img src="imgs/czyl.png" alt="">
        <p style="font-size: 28px ">充值有礼</p>
      </a>
    </div>
    <div class="v">
      <a href="" style="text-decoration: none;">
        <img src="imgs/yypd.png" alt="">
        <p style="font-size: 28px">预约排队</p>
      </a>
    </div>
  </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        arr: ["imgs/c1.jpg", "imgs/c2.jpg", "imgs/c3.jpg", "imgs/c4.jpg"]
      }
    },
    methods: {}
  })
</script>
</html>